<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
	</head>
	<link rel="stylesheet" href="css/index.css"/>
	<body>
		<!--主体区域 -->
		<section id="app">
			<!-- 输入框-->
			<header class="header">
				<h1>小黑记事本</h1>
				<input v-model="todoname" placeholder="请输入任务" class="new-todo"/>
				<button @click="add()" class="add">添加任务</button>
			</header>
			<!--列表区域 -->
			<section class="main">
				<ul class="todo-list">
					<li class="todo"  v-for="(item,index) in list" :key="item.id">
						<div class="view">
							<span class="index">{{index+1}}</span><label>{{item.name}}</label>
							<button class="destroy" @click="del(item.id)"></button>
						</div>
					</li>
				</ul>
			</section>
			<!-- 统计和清空 -->
			<footer class="footer">
			  <!-- 统计 -->
			  <span class="todo-count">合 计:<strong> 2 </strong></span>
			  <!-- 清空 -->
			  <button class="clear-completed">
			    清空任务
			  </button>
			</footer>
		</section>
		<script src="../js/vue.js"></script>
		<script>
			//添加功能
			//1.通过v-model绑定输入框->实时获取表单元素的内容
			//2.点击按钮，进行新增 ，往数组最前面加unshift
			//unshift() 方法将指定元素添加到数组的开头，并返回数组的新长度
			const app = new Vue({
				el:'#app',
				data:{
					todoname:'',
					list:[
						{id:1,name:'跑步一公里'},
						{id:2,name:'跳绳200次'},
						{id:3,name:'游泳100米'},
					]
				},
				methods:{
					del(id){
						this.list = this.list.filter(item => item.id != id)
					},
					add(){
						//trim() 方法会从字符串的两端移除空白字符，并返回一个新的字符串
						if(this.todoname.trim() === ''){
							alert('请输入任务内容')
							return
						}
						this.list.unshift({
							id: +new Date(),
							name:this.todoname
						})
						this.todoname = ''
					}
				}
			})
		</script>
	</body>
</html>